<!--
 * @Author: your name
 * @Date: 2021-08-04 14:30:50
 * @LastEditTime: 2021-08-08 16:29:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \niushop\src\views\Login\index.vue
-->
<template>
  <div class="box">
    <header>注册中心</header>
    <van-field v-model="username" label="用户名" placeholder="请输入您的用户名（例：liyong）"/>
    <van-field v-model="nickname" label="昵称" placeholder="请输入您的昵称（例：前端小灰狼）"/>
    <van-field v-model="password" type="password" label="密码" placeholder="请输入您的密码" />
    <van-field v-model="rpassword" type="password" label="重复密码" placeholder="重复密码" />
    <div class="btns">
       <van-button plain hairline class="pink" @click="reg">注册</van-button>
      <van-button plain hairline class="pink" @click="login">去登陆</van-button>
    </div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        username:'',
        password:"",
        nickname:"",
        rpassword:""
      }
    },
    methods:{
        reg(){
            if(!(this.username||this.password||this.nickname||this.rpassword)){
                this.$toast("请完整填写信息")
            }else{
                 this.$http({
                method:"post",
                path:"/users/register",
                params:{
                   username:this.username,
                   password:this.password,
                   nickname:this.nickname,
                   rpassword:this.rpassword 
                }
            }).then(res=>{
                if(res.data.code==1){
                    console.log(res);
                     this.$toast("注册成功，去登陆")
                }else{
                    this.$toast("注册失败")
                }
               
            })
            }
           
        },
        login(){
            this.$router.push("/login")
        }
    }
}
</script>

<style scoped>
    .box{
      background: #f5f5f5;
      height: 100%;
    }
    header{
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 600;
      color: hotpink;
      background: white;
      margin-bottom: 20px;
    }
    .btns{
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      margin-top: 40px;
    }
    .van-button{
      width: 40%;
      border-radius: 6px;
      
    }
    .pink{
      background: pink;
      color: #ffffff;
    }
</style>